<template>
	<view class="my_app">
		<view class="box_1">
			<view class="box_info" :class="top_loading === true ? 'wait' : ''">
				<view class="box_top u-skeleton">
					<view class="avatar_box">
						<image :src="basic.logo_src" alt="logo"></image>
					</view>
					<view class="name">{{ basic.companyname }}</view>
					<view class="some">{{ basic.scale_text }} · {{ basic.district_text }} · {{ basic.nature_text }}
					</view>
				</view>
				<u-skeleton avatar :row="3" :loading="top_loading"></u-skeleton>
				<view class="box_bottom">
					企业资料
					<view class="right_txt" @click="handleJump('/company/BasicInfo')">修改企业资料</view>
				</view>
			</view>
		</view>
		<view class="box_2">
			企业风采
			<view class="right_txt">最多可上传6张企业风采图片</view>
		</view>
		<view class="box_3 clearfix">
			<view class="img_item" v-for="(item, index) in imgList" :key="index">
				<image :src="item.img_src" alt="item.title" class="img" @click="previewImg(index)"></image>
				<view class="audit_bg" v-if="parseInt(item.audit) !== 1">{{ item.audit_text }}</view>
				<view class="delete_ico" @click="openDelModal(item.id)"></view>
			</view>
			<view class="img_item" v-if="imgList.length < 6">
				<u-upload ref="uUpload" :action="action" :custom-btn="true" :show-progress="false"
					:show-upload-list="false"
					:header="{ 'Content-Type': 'multipart/form-data', 'user-token': userToken, platform: platform }"
					@on-uploaded="afterRead" @on-choose-complete="onChooseComplete" @on-error="handleUploadError"
					@on-oversize="handleOversize" :max-size="1024 * 1024 * fileupload_size"
					:limitType="['png', 'jpg', 'jpeg', 'bmp', 'gif']" max-count="1" :multiple="false">
					<view slot="addBtn" class="img_item for_upload">添加图片</view>
				</u-upload>
			</view>
		</view>
		<view class="box_4">
			<u-button type="primary" shape="circle"
				@click="handleClick({ path: '/commonViews/CompanyShow', query: { id: basic.id } })">预览企业主页</u-button>
		</view>
		<!-- uploading -->
		<u-mask :show="uploading">
			<view class="uploading_wrapper">
				<view class="upload_con">
					<u-loading mode="flower" size="60rpx"></u-loading>
					<view class="upload_text">正在上传</view>
				</view>
			</view>
		</u-mask>
		<u-top-tips ref="uTips"></u-top-tips>
		<!-- 删除作品提示框 -->
		<u-modal v-model="delModelTip" title="系统提示" show-cancel-button content="确定删除该照片吗" @confirm="deleteImg"
			@cancel="delModelTip = false"></u-modal>
	</view>
</template>

<script>
	import http from '@/utils/http';
	import api from '@/api';
	import {
		mapState
	} from 'vuex';
	export default {
		name: 'CompanyManagement',
		data() {
			return {
				action: getApp().globalData.baseURL + api.company_img_upload,
				imgId: '',
				delModelTip: false,
				uploading: false,
				top_loading: true,
				basic: {},
				imgList: [],
				previewImgList: []
			};
		},
		computed: {
			...mapState({
				userToken: state => state.userToken,
				platform: state => state.platform,
				fileupload_size: state => state.config.fileupload_size / 1024
			})
		},
		created() {
			this.fetchData();
		},
		methods: {
			handleClick(obj) {
				if (obj.query.id && obj.query.id != '') {
					uni.navigateTo({
						url: '/commonViews/CompanyShow?id=' + obj.query.id
					});
				} else {
					uni.navigateTo({
						url: obj.path
					});
				}
			},
			handleJump(path) {
				uni.navigateTo({
					url: path
				})
			},
			fetchData() {
				http.get(api.company_profile, {})
					.then(res => {
						const {
							basic,
							img_list
						} = {
							...res.data.data
						};
						this.basic = basic;
						this.top_loading = false;
						this.imgList = img_list;
						this.setPreviewImgList();
					})
					.catch(() => {});
			},
			afterRead(lists) {
				if (lists.length > 0 && lists[0].error == false) {
					var res = lists[lists.length - 1].response;
					this.uploading = false;
					this.$refs.uTips.show({
						title: res.message,
						type: 'success'
					});
					this.imgList.push({
						id: res.data.id,
						img: res.data.file_id,
						title: '',
						addtime: Date.parse(new Date()) / 1000,
						audit: res.data.audit,
						audit_text: res.data.audit_text,
						img_src: res.data.file_url
					});
					this.setPreviewImgList();
					this.$refs.uUpload.clear();
				}
			},
			handleUploadError() {
				this.uploading = false;
			},
			/**
			 * 图片大小超出最大限制
			 * */
			handleOversize() {
				uni.showToast({
					title: '图片最大不能超过' + this.fileupload_size + 'M',
					icon: 'none'
				});
			},
			onChooseComplete(lists, name) {
				if (lists.length > 0) {
					this.uploading = true;
				}
			},
			openDelModal(id) {
				this.delModelTip = true;
				this.imgId = id;
			},
			// 删除作品
			deleteImg() {
				http.post(api.company_img_del, {
						id: this.imgId
					})
					.then(res => {
						if (parseInt(res.data.code) === 200) {
							this.$refs.uTips.show({
								title: res.data.message,
								type: 'success'
							});
							this.imgList.splice(this.imgList.findIndex(item => parseInt(item.id) === parseInt(this
								.imgId)), 1);
							this.setPreviewImgList();
						}
						// else {
						// 	this.$refs.uTips.show({
						// 		title: res.data.message,
						// 		type: 'error'
						// 	})
						// }
					})
					.catch(err => {
						console.log(err);
					});
			},
			// 预览作品
			previewImg(index) {
				uni.previewImage({
					urls: this.previewImgList,
					indicator: 'number',
					loop: false,
					current: index
				});
			},
			// 更新预览图片
			setPreviewImgList() {
				this.previewImgList = this.imgList.map(function(item) {
					return item.img_src;
				});
			}
		}
	};
</script>

<style lang="scss" scoped>
	.u-skeleton {
		margin-bottom: 20rpx;
	}

	.box_4 {
		padding: 70rpx;
	}

	.uploading_wrapper {
		display: flex;
		width: 100%;
		height: 100%;
		align-items: center;
		justify-content: center;

		.upload_con {
			text-align: center;

			.upload_text {
				color: #fff;
			}
		}
	}

	.box_3 {
		.img_item {
			&.for_upload {
				margin: 0;
				padding-top: 140rpx;
				text-align: center;
				font-size: 28rpx;
				color: #c0c0c0;
				background-image: url(./static/img/upload_add_ico.png);
				background-color: #f8f8f8;
				background-position: center 40rpx;
				background-repeat: no-repeat;
				background-size: 64rpx;
			}

			.delete_ico {
				&::before {
					position: absolute;
					left: 10rpx;
					top: 19rpx;
					width: 20rpx;
					border-top: 2rpx solid #ffffff;
					content: ' ';
					transform: rotate(45deg);
				}

				&::after {
					position: absolute;
					left: 19rpx;
					top: 10rpx;
					height: 20rpx;
					border-right: 2rpx solid #ffffff;
					content: ' ';
					transform: rotate(45deg);
				}

				position: absolute;
				right: -12rpx;
				top: -12rpx;
				width: 40rpx;
				height: 40rpx;
				border-radius: 100%;
				z-index: 2;
				background-color: rgba(0, 0, 0, 0.5);
			}

			.audit_bg {
				position: absolute;
				left: 0;
				top: 0;
				width: 200rpx;
				height: 200rpx;
				border-radius: 8rpx;
				text-align: center;
				line-height: 200rpx;
				color: #c0c0c0;
				font-size: 30rpx;
				background-color: rgba(0, 0, 0, 0.75);
				z-index: 1;
			}

			.img {
				width: 200rpx;
				height: 200rpx;
				border-radius: 8rpx;
				border: 0;
			}

			&:nth-of-type(3n) {
				margin-right: 0;
			}

			float: left;
			position: relative;
			width: 200rpx;
			height: 200rpx;
			border-radius: 4px;
			margin: 0 40rpx 40rpx 0;
		}

		padding: 20rpx;
	}

	.box_2 {
		.right_txt {
			position: absolute;
			right: 34rpx;
			top: 50%;
			transform: translate(0, -50%);
			font-size: 26rpx;
			color: #999999;
		}

		width: 100%;
		position: relative;
		font-size: 36rpx;
		color: #333333;
		font-weight: bold;
		padding: 30rpx 34rpx;
	}

	.box_1 {
		.box_info {
			&.wait {
				padding: 30rpx 30rpx 0 30rpx;
			}

			.box_bottom {
				.right_txt {
					position: absolute;
					right: 20rpx;
					top: 50%;
					transform: translate(0, -50%);
					font-size: 28rpx;
					color: #999999;
					padding-right: 30rpx;
				}

				&::after {
					position: absolute;
					right: 32rpx;
					top: 44rpx;
					width: 12rpx;
					height: 12rpx;
					border-top: 2rpx solid #666666;
					border-right: 2rpx solid #666666;
					transform: rotate(45deg);
					content: ' ';
				}

				width: 100%;
				border-top: 2rpx solid #f3f3f3;
				position: relative;
				padding: 30rpx 0 30rpx 60rpx;
				background-image: url($ImgUrl+'company_man_info_ico.png');
				background-position: 26rpx center;
				background-repeat: no-repeat;
				background-size: 22rpx 26rpx;
				font-size: 28rpx;
				color: #333333;
			}

			.box_top {
				.avatar_box {
					image {
						width: 112rpx;
						height: 112rpx;
						border: 0;
						border-radius: 14rpx;
					}

					position: absolute;
					left: 40rpx;
					top: 40rpx;
					box-shadow: 0 0 10rpx #c2c2c2;
					width: 112rpx;
					height: 112rpx;
				}

				.some {
					padding-bottom: 36rpx;
					font-size: 24rpx;
					color: #666666;
					overflow: hidden;
					white-space: nowrap;
					text-overflow: ellipsis;
				}

				.name {
					padding: 42rpx 0 22rpx;
					font-size: 36rpx;
					color: #333333;
					font-weight: bold;
					overflow: hidden;
					white-space: nowrap;
					text-overflow: ellipsis;
				}

				padding: 0 40rpx 0 180rpx;
				width: 100%;
			}

			position: relative;
			width: 680rpx;
			background-color: #ffffff;
			border-radius: 10rpx;
			margin: 0 auto;
			box-shadow: 0 2rpx 10rpx #c2c2c2;
		}

		position: relative;
		width: 100%;
		margin-bottom: 20rpx;
	}

	.my_app {
		background-image: url('./static/img/serve_index_top_bg.png');
		background-position: center 0;
		background-repeat: no-repeat;
		background-size: 750rpx 336rpx;
		padding-top: 62rpx;
	}

	.u-overlay {
		text-align: center;
		z-index: 2;
	}

	.u-loading {
		top: 36%;
	}

	.u-loading__text {
		color: #c3c3c3;
	}
</style>